<template>
  <div class="container">范方方
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col :span="8">
          关键字
          <el-input v-model="query.keyword" placeholder="根据编号搜索" style="width: 300px" @keyup.enter.native="getList">
          </el-input>
        </el-col>
        <el-col :span="14">
          <el-row type="flex" justify="end">
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="getList">搜索</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 警告 -->
      <el-alert type="info" :closable="false" show-icon>
        <template slot="title">数据一共{{ counts }}条</template>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="questionType" :formatter="formatQuestion" label="题型" width="100">
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号">
          <template v-slot="{ row }">
            <span :key="index" v-for="(item, index) in row.questionIDs"
              @click="showViewDialog(item)">{{ item.number }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="160">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间（s）" width="100">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率（%）" width="100">
        </el-table-column>
        <el-table-column prop="userName" label="录入人" width="100">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="{ row }">
            <el-tooltip class="item" effect="light" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" circle plain @click="del(row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page"
          :page-sizes="[10, 15, 20, 30]" :page-size="query.pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="counts">
        </el-pagination>
      </el-row>
    </el-card>
    <questions-preview :show-dialog.sync="showDialog" :question-views="questionViews" />
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions'
import { questionType } from '../../api/hmmm/constants'
import questionsPreview from '../components/questions-preview.vue'

export default {
  components: { questionsPreview },
  data () {
    return {
      questionForm: {},
      counts: 0,
      query: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      tableData: [],
      showDialog: false,
      questionViews: {}
    }
  },
  created () {
    this.getList()
  },
  watch: {
    counts () {
      if (this.counts === (this.query.page - 1) * this.query.pagesize && this.counts !== 0) { // 这一行是关键代码，倍数关系
        this.query.page -= 1
        this.getList()// 获取表格数据的方法
      }
    }
  },
  methods: {
    // 获取组题列表
    async getList () {
      const { data: res } = await randoms(this.query)
      console.log(res)
      this.tableData = res.items
      this.counts = res.counts
    },
    // 监听分页条页码改变事件 并重新拉取数据
    handleCurrentChange (newPage) {
      // newPage是当前点击的页码
      this.query.page = newPage // 将当前页码赋值给当前的最新页码
      this.getList()
    },
    // 监听分页条每页条数改变事件
    handleSizeChange (newSize) {
      this.query.pagesize = newSize // 将当前每页条数赋值给当前的最新每页条数
      this.getList()
    },
    // 点击清除
    clear () {
      this.query.keyword = ''
      this.getList()
    },
    // 删除组题
    del (row) {
      this.$confirm('此操作将永久删除该组题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms(row) // 发请求
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 格式化题型
    formatQuestion (row, column, cellValue, index) {
      // 要去找单元格内容所对应的值
      const obj = questionType.find((item) => item.value + '' === cellValue)
      return obj ? obj.label : '未知题型'
    },
    async showViewDialog (row) {
      const { data: res } = await detail(row)
      console.log(res)
      this.questionViews = res
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 10px;
}
.el-alert {
  margin-top: 15px;
}
.el-table {
  margin: 15px 0;
}
span {
  display: block;
  color: #0099ff;
  cursor: pointer;
}
</style>
